{% extends 'base.jinja2' %}
{% set product_name = mfDefinition.variant.product_name %}

{% block css %}
  {% assets filters="scss", output="css/gen/setup.css",
    "css/scss/setup.scss" %}
    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
  {% endassets %}
{% endblock %}

{% block content %}
<div id="setup-view" class="row">
  <div class="small-12 large-8 large-centered columns" align="center">
    <div id="step-welcome" class="step hide">
      {% set welcome_header = mfDefinition.getString('welcome_header','en') %}
      <h1 class="bold">{% if welcome_header -%} {{welcome_header}} {%- else -%} Welcome to Your {{product_name}} {%- endif %}<div class="nub"></div></h1>
      <div class="content" align="center">
        <img src="/img/setup/step_1_rocket.png" height="104"/>
        <p>
          {%- set welcome_content = mfDefinition.getString('welcome_content','en') %}
          {% if welcome_content -%}
            {{welcome_content}}
          {%- else -%}
            Your support makes AstroPrint a reality! In other words, you are amazing and you are changing the world for the better
          {%- endif -%}
        </p>
        <a class="button success radius expand bold" href="#name">Begin Setup</i></a>
      </div>
    </div>

    <div id="step-name" class="step hide">
      <h1 class="bold">Name Your {{product_name}}<div class="nub"></div></h1>
      <div class="content">
        <img src="/img/setup/step_2_rocket.png" height="104"/>
        <p>
          If you have more than one {{product_name}}, be sure to give them different names to prevent conflicts!
        </p>
        <div class="settings-state">
          <form align="center">
            <label for="astrobox-name">
              <b>{{product_name}} Name:</b>
              <input id="astrobox-name" class="radius" type="text" name="name" autocomplete="off"/>
            </label>
            <p>
              A few important things to remember:
            </p>
            <ul class="preview">
              <li><i class="icon-signal"></i> Hotspot WiFi name: <span class="hotspot-name bold"></span></li>
              <li><i class="icon-link"></i> {{product_name}} URL: http://<span class="astrobox-url bold"></span>.local</li>
            </ul>
            <div class="loading-button expand">
              <a class="button success radius submit-action expand" href="#internet"><small>Next:</small> <b>Internet Setup</b> <i class="icon-right-open"></i></a>
              <span class="button success disabled radius loading expand"><i class="icon-rocket-spinner animate-spin"></i> Saving...</span>
            </div>
          </form>
        </div>
        <div class="checking-state" align="center">
          <i class="icon-rocket-spinner animate-spin"></i>
          <h3 class="bold" align="center">Checking Name...</h3>
        </div>
        <div class="failed-state" align="center">
          <i class="icon-cancel-circled failed"></i>
          <h3 class="bold" align="center"></h3>
          <button class="success radius">Retry</button>
        </div>
      </div>
    </div>

    <div id="step-internet" class="step hide">
      <h1 class="bold">Internet Setup<div class="nub"></div></h1>
      <div class="content">
        <div class="success-state" align="center">
          <img src="/img/setup/step_4_wifi-box.png" height="107"/>
          <h3 class="bold" align="center">Success!</h3>
          <p>
            Your {{product_name}} is now connected to the internet.
          </p>
          <hr/>
          <div class="row hotspot-off">
            <div class="small-2 medium-1 columns">
              <input id="hotspot-off" type="checkbox" {%- if (settings.getBoolean(['wifi','hotspotOnlyOffline'])) %} value="yes" checked {%- endif %}>
            </div>
            <div class="small-10 medium-11 columns">
              <label for="hotspot-off">
                <b>Turn hotspot off when a known network is found in the future.</b><br/>
                <small>(This can be changed later in the settings menu)</small>
              </label>
            </div>
          </div>
          {% if mfDefinition.variant.printer_selection_hidden %}
            <a class="button success radius expand" href="#astroprint"><small>Next:</small> <b>AstroPrint Account</b> <i class="icon-right-open"></i></a>
          {% else %}
            <a class="button success radius expand" href="#printer-selection"><small>Next:</small> <b>Printer selection</b> <i class="icon-right-open"></i></a>
          {% endif %}
        </div>
        <div class="checking-state" align="center">
          <i class="icon-rocket-spinner animate-spin"></i>
          <h3 class="bold" align="center">Checking connection...</h3>
        </div>
        <div class="failed-state" align="center">
          <i class="icon-cancel-circled failed"></i>
          <h3 class="bold" align="center"></h3>
          <button class="success radius expand">Retry</button>
          <div align="right">
            <a href="{% if mfDefinition.variant.printer_profile_edit -%} #connect-printer {%- else -%} #done {%- endif %}" class="skip-step">Skip internet. Use {{product_name}} offline <i class="icon-right-open"></i></a>
          </div>
        </div>
        <div class="settings-state">
          <h2 class="bold" align="center">Choose your WiFi Network</h2>
          <div class="wifi-network-list"></div>
          <div class="row">
            <div class="loading-button expand">
              <div class="small-12 medium-6 medium-push-6 columns">
                <button class="disabled success radius connect expand bold">Connect</button>
              </div>
              <div class="small-12 medium-6 medium-pull-6 columns">
                {% if mfDefinition.variant.printer_selection_hidden %}
                  {% if mfDefinition.variant.printer_profile_edit %}
                    <a href="#connect-printer" class="button secondary radius expand bold"><sup>*</sup>Skip</a>
                  {% else %}
                    <a href="#done" class="button secondary radius expand bold"><sup>*</sup>Skip</a>
                  {% endif %}
                {% else %}
                  <a href="#printer-selection" class="button success radius expand" ><sup>*</sup>Skip</a>
                {% endif %}
              </div>
              <div class="small-12 columns">
                <span class="button disabled loading success radius expand">
                  <i class="icon-rocket-spinner animate-spin"></i> Might be a while. Please be patient...
                </span>
              </div>
            </div>
          </div>
          <p class="small">
            <sup>*</sup> Without being connected to the internet, you can only
            use the {{product_name}} when you are near it.
          </p>
        </div>
      </div>

      <div id="wifi-network-password-modal" class="reveal-modal medium radius" data-reveal>
        <script type="text/template" id="wifi-network-password-modal-template">
          <% if (wifi.wep) { %>
            <h2 class="bold" align="center">WEP Security Deprecated</h2>
            <div class="modal-body">
              <p>
                The <%= wifi.name %> WiFi network seems to be configured to use WEP security.
              </p>
              <p>
                WiFI WEP Security was <a href="https://en.wikipedia.org/wiki/Wired_Equivalent_Privacy" target="_info">deprecated in 2004</a>
                and is <b>not considered safe</b>, please configure your WiFi network to use WPA or WPA2.
              </p>
            </div>
            <div class="modal-actions row">
              <div class="small-12 medium-6 columns medium-centered">
                <a class="button secondary radius cancel expand" href="#internet">Close</a>
              </div>
            </div>
          <% } else { %>
            <h2 class="bold" align="center">WiFi Password</h2>
            <form>
              <div class="modal-body">
                <p align="center">Enter the password for <span class="name bold"><%= wifi.name %></span>.</p>
                <input type="hidden" class="network-id-field" name="id" value="<%= wifi.id %>"/>
                <input type="password" class="network-password-field" name="password"/>
                <label for="show-password">
                  <input type="checkbox" id="show-password"/>
                  Show Password
                </label>
              </div>
              <div class="modal-actions row">
                <div class="small-12 medium-6 columns">
                  <a class="button secondary radius cancel expand" href="#internet">Cancel</a>
                </div>
                <div class="small-12 medium-6 columns">
                  <div class="loading-button expand">
                    <input type="submit" class="button radius success connect" value="Connect"/>
                    <span class="loading button success disabled radius">
                      <i class="icon-rocket-spinner animate-spin"></i> Please be patient...
                    </span>
                  </div>
                </div>
              </div>

            </form>
          <% } %>
        </script>
      </div>

      <script type="text/template" id="wifi-network-list-template">
        <ul>
        <% _.each(networks, function(n, idx) { %>
          <li data-id="<%= idx %>">
            <span class="name left"><%= n.name %></span>
            <span class="indicators right">
              <% if (n.secured) { %><i class="icon-lock"></i><% } %>
              <% if (n.signal < 33) { %>
                <i class="icon-wifi-signal-low"></i>
              <% } else if (n.signal > 33 && n.signal < 66) { %>
                <i class="icon-wifi-signal-med"></i>
              <% } else { %>
                <i class="icon-wifi-signal-high"></i>
              <% } %>
            </span>
            <div class="clearfix"></div>
          </li>
        <% }); %>
        </ul>
      </script>
    </div>

    <div id="step-astroprint" class="step hide">
      <h1 class="bold">AstroPrint.com Account<div class="nub"></div></h1>
      <div class="content">
        <div class="checking-state" align="center">
          <i class="icon-rocket-spinner animate-spin"></i>
          <h3 class="bold" align="center">Checking AstroPrint.com...</h3>
        </div>
        <div class="success-state" align="center">
          <img src="/img/setup/step_5_rocket-launch.png" height="93"/>
          <h4 class="bold" align="center">
            <i class="icon-user ok"></i>
            <span class="email"></span>
            (<a class="logout" href="#">Logout</a>)
          </h4>
          {% if mfDefinition.variant.printer_profile_edit %}
          <a class="button success radius expand" href="#connect-printer"><small>Next:</small> <b>Printer Connection</b> <i class="icon-right-open"></i></a>
          {% else %}
          <a class="button success radius expand" href="#done"><small>Next:</small> <b>Finish!</b> <i class="icon-right-open"></i></a>
          {% endif %}
        </div>
        <div class="settings-state">
          <img src="/img/setup/step_5_rocket-launch.png" height="93"/>
          <p>
            This allows you to slice, store, and print through our cloud servers. Sign in below or <a target="_astroprint" href="http://www.astroprint.com/account/signup">create a new account</a>.
          </p>
          <form>
            <label for="email">
              <i class="icon-user"></i> <b>Email</b> (<a target="_astroprint" href="https://www.astroprint.com/account/signup">don't have account?</a>)
              <input type="email" id="email" class="radius" name="email"/>
            </label>
            <label for="password">
              <i class="icon-lock"></i> <b>Password</b> (<a target="_astroprint" href="https://www.astroprint.com/account/forgot">forgot?</a>)
              <input type="password" id="password" class="radius" name="password"/>
            </label>
            <div align="center">
              <div class="loading-button expand">
                {% if mfDefinition.variant.printer_profile_edit %}
                  <button class="success radius submit-action expand" href="#connect-printer"><small>Next:</small> <b>Printer Connection</b> <i class="icon-right-open"></i></button>
                {% else %}
                  <button class="success radius submit-action expand" href="#done"><b>Sign In</b></button>
                {% endif %}
                <span class="button success disabled radius loading expand"><i class="icon-rocket-spinner animate-spin"></i> Signing in...</span>
              </div>
            </div>
          </form>
          <div align="right">
            <a href="{% if mfDefinition.variant.printer_profile_edit -%} #connect-printer {%- else -%} #done {%- endif %}" class="skip-step">Skip AstroPrint Account <i class="icon-right-open"></i></a>
          </div>
        </div>
      </div>
    </div>

    {% if mfDefinition.variant.printer_profile_edit %}
      <div id="step-connect-printer" class="step hide">
        <h1 class="bold">Connect Your Printer<div class="nub"></div></h1>
        <div class="content">
          <img src="/img/setup/step_6_connect-box.png" height="90"/>
          <p align="center">
            Plug your printer's USB in the {{product_name}} and click continue when done.
          </p>
          <a href="#printer" class="button success radius share-button bold expand">Continue</a>
          <div align="right">
            <a class="skip-step" href="#done">Skip and Configure Later <i class="icon-right-open"></i></a>
          </div>
        </div>
      </div>

      <div id="step-printer" class="step hide">
        <h1 class="bold">Connect Your Printer<div class="nub"></div></h1>
        <div class="content">
          <img src="/img/setup/step_6.2_connected-box.png" height="76"/>
          <div class="checking-state" align="center">
            <i class="icon-rocket-spinner animate-spin"></i>
            <h3 class="bold" align="center">Checking Printer Settings...</h3>
          </div>
          <div class="settings-state">
            <p>
              Select your connection settings.
            </p>
            <form></form>
            <div align="right">
              <a href="#done" class="skip-step">Skip Printer Connection <i class="icon-right-open"></i></a>
            </div>
          </div>
        </div>
        <script type="text/template" id="step-printer-template">
          <label for="settings-printer-driver" class="bold">
            Driver
            <select id="settings-printer-driver" name="driver">
              <% _.each(settings.driverChoices, function(name, id) { %>
                <option value="<%= id %>"><%= name %></option>
              <% }) %>
            </select>
          </label>

          <label for="settings-serial-port" class="bold">
            USB Device
            <% if (settings.portOptions.length > 0) { %>
              <% if (settings.portOptions.length > 1) { %>
                <select id="settings-serial-port" name="port">
                  <% _.each(settings.portOptions, function(e) { %>
                    <option value="<%= e[0] %>"<%= settings.port == e[0] ? ' selected' : '' %>><%= e[1] %></option>
                  <% }) %>
                </select>
              <% } else { %>
                <% var e = settings.portOptions[0] %>
                <input type="hidden" value="<%= e[0] %>" name="port"/>
                <p><%= e[1] %></p>
              <% } %>
            <% } else { %>
              <p>
              No printer detected. Is your printer plugged in?<br/>
              <a href="#" class="retry-ports bold">Plug printer and retry &raquo; </a>
              </p>
            <% } %>
          </label>
          <% if (settings.baudrateOptions.length > 0) { %>
            <label for="settings-baudrate" class="bold">Baud Rate
              <% if (settings.baudrateOptions.length > 1) { %>
                <select id="settings-baudrate" name="baudrate">
                  <% _.each(settings.baudrateOptions, function(e) { %>
                    <option value="<%= e %>"<%= settings.baudrate == e[0] ? ' selected' : '' %>><%= e %></option>
                  <% }) %>
                </select>
              <% } else { %>
                <p><%= settings.baudrateOptions[0] %></p>
                <input type="hidden" value="<%= settings.baudrate %>"/>
              <% } %>
            </label>
          <% } %>
          <% if (settings.portOptions.length > 0 ) { %>
            <div align="center">
              <div class="loading-button expand">
                <button class="button success radius submit-action expand bold" href="#done">
                  Connect
                </button>
                <span class="button success disabled radius loading expand">
                  <i class="icon-rocket-spinner animate-spin"></i> Connecting...
                </span>
                <span class="button alert disabled radius failed expand">
                  <i class="icon-attention"></i> Failed to connect
                </span>
              </div>
            </div>
          <% } %>
        </script>
      </div>
    {% endif %}

    {% if not mfDefinition.variant.printer_selection_hidden %}
    <div id="step-printer-selection" class="step checking hide">
      <h1 class="bold">Printer Selection<div class="nub"></div></h1>
      <div class="content">
        <img src="/img/setup/chooseprinter.png" height=""/>
        <div class="checking-state" align="center">
          <i class="icon-rocket-spinner animate-spin"></i>
          <h3 class="bold" align="center">Loading data...</h3>
        </div>
        <div align="center" class="checking-state">
          <a href="#astroprint" class="skip-step button secondary bold expand radius">Skip Printer Selection <i class="icon-right-open"></i></a>
        </div>
        <div class="container-printer-selection">
          {% if printerProfileId  %}
          <p class="printer-selected-message" >Current selected printer: <b><span class="current-printer-selected"></span></b></p>
          <a class="button radius warning bold change-printer expand">Change it</a>
          {% else %}
          <a class="button radius warning bold change-printer expand">Add Printer</a>
          {% endif %}


          <div id="picker-container" ></div>


          <div class="loading-button expand">
            <button class="radius success radious next"><small>Next:</small> <b>AstroPrint Account</b> <i class="icon-right-open"></i></button>
            <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i></span>
            <span class="button disabled alert radius failed"><i class="icon-attention"></i> Failed</span>
          </div>

          {% if not printerProfileId  %}
            <div align="right">
              <a href="#astroprint" class="skip-step">Skip Printer Selection <i class="icon-right-open"></i></a>
            </div>
          {% endif %}

        </div>
      </div>
      <script type="text/template" id="step-printer-selection-template">

        <!-- Manufacturers -->
        <% if (!lockedManufacturerId) { %>
        <label for="manufacturers-picker" class="bold">
          1. Choose manufacturer
          <select id="manufacturers-picker" name="driver">
            <% _.each(manufacturers, function(m) { %>
              <option value="<%= m.id %>" <%= mSelected == m.id ? ' selected' : '' %>  ><%= m.name %></option>
            <% }) %>
          </select>
        </label>
        <% } %>


        <!-- Printers -->
        <label for="printer-model-picker" class="bold">
           <% if (!lockedManufacturerId) { %>2.<% } %> Pick a Printer
          <select id="printer-model-picker" name="driver" <%= mSelected == 0 ? ' disabled' : '' %> >
            <% _.each(printers, function(p) { %>
              <option value="<%= p.id %>" <%= pSelected == p.id ? ' selected' : '' %> ><%= p.name %></option>
            <% }) %>
          </select>
        </label>
      </script>
    </div>
    {% endif %}


    <div id="step-done" class="step hide">
      <h1 class="bold">You're done!<div class="nub"></div></h1>
      <div class="content">
        <img src="/img/setup/final_step_astroprint_logo.png" height=""/>
        <p>
        <b>Congratulations!</b>
          {%- set setup_done = mfDefinition.getString('setup_done','en') %}
          {% if setup_done -%}
            {{setup_done}}
          {%- else -%}
            Your {{product_name}} is all set up. Now go print something awesome!
          {%- endif -%}
        </p>
        <div class="loading-button expand">
          <a class="button radius success bold setup-done expand" href="#">Start Printing <i class="icon-right-open"></i></a>
          <span class="button disabled success bold expand loading"><i class="icon-rocket-spinner animate-spin"></i> Launching</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="version-label">{{version}} &bull; <a href="#" class="shutdown" title="Shutdown"><i class="icon-off"></i></a></div>

<div id="turnoff-view" class="app-view hide" data-fullscreen="1"> {%- include 'turnoff.jinja2' -%} </div>

{% endblock %}

{% block js %}
  <script type="text/javascript">
    var UI_API_KEY = "{{ uiApiKey }}";
    var BASEURL = "{{ url_for('index') }}";
    var API_BASEURL = BASEURL + "api/";
    var SOCKJS_URI = window.location.protocol.slice(0, -1) + "://" + (window.document ? window.document.domain : window.location.hostname) + ":" + window.location.port + "/sockjs";
    var PRODUCT_NAME = "{{product_name}}";
    var WS_TOKEN = "{{ wsToken }}";
    var AP_API_HOST = "{{apApiHost}}";
    var MANUFACTURER_ID = "{{ mfDefinition.printerProfile.manufacturer_id }}";
    var printerProfileId = "{{ printerProfileId if printerProfileId }}"
  </script>
  {% assets filters="closure_js", output="js/gen/setup.js",
    "js/lib/jquery.js", "js/lib/underscore.js", "js/lib/backbone.js", "js/lib/sockjs.js", "js/lib/fastclick.js", "js/lib/foundation/foundation.js", "js/lib/foundation/foundation.abide.js", "js/lib/foundation/foundation.reveal.js",
    "js/lib/jquery.noty.js", "js/lib/jquery.noty.top.js", "js/lib/sockjs.js",
    "js/app/views/turnoff.js", "js/app/astroprint-api.js","js/setup/setup.js"  -%}
      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
  {%- endassets %}
  <script type="text/javascript">
    $(document).foundation();
  </script>
{% endblock %}
